<template>
  <a-form :model="usersStore.$state.getListInfo" :style="{ width: '1500px' }" layout="inline">
    <a-form-item label="用户名">
      <a-input v-model="usersStore.$state.getListInfo.userName" placeholder="请输入用户名" style="width: 150px" />
    </a-form-item>
    <a-form-item label="手机号">
      <a-input v-model="usersStore.$state.getListInfo.userPhone" placeholder="请输入手机号" />
    </a-form-item>
    <a-form-item label="公司名称">
      <a-input v-model="usersStore.$state.getListInfo.userCompany" placeholder="请输入公司名称" style="width: 250px" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" @click="searchClick">
        <template #icon>
          <icon-search />
        </template>
        查询
      </a-button>
      <a-button type="primary" status="danger" style="margin-left: 10px" @click="usersStore.resetHeaderForm()">
        <template #icon>
          <icon-refresh />
        </template>
        重置
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Header'
})
</script>
<script lang="ts" setup>
// 引入
import { useUsersStore } from '@/store'
import { Message } from '@arco-design/web-vue'
const usersStore = useUsersStore()

// 查询的点击事件
const searchClick = () => {
  usersStore.$state.getListInfo.page = 1
  usersStore
    .getUsersListFunc()
    .then(() => {
      Message.success('查询成功')
    })
    .catch(() => {
      Message.success('查询失败')
    })
}
</script>

<style scoped></style>
